<template>
	<div class="create_address">
		<div class="create_address_title">
			<van-icon name="arrow-left" size="22px" style="position: absolute;left: 5px;" @click="back" />
			<p>新建地址</p>
		</div>
		<div>

			<van-form @submit="onSubmit">
				<van-field v-model="address_info.receiver" name="receiver" label="收货人" placeholder="请填写收货人的姓名" />
				<van-field v-model="address_info.contact" name="contact" label="手机号码" placeholder="请填写收货人的手机号码" />
				<!-- 所在地区 -->

				<van-field readonly clickable name="fullLocation" :value="address_info.fullLocation" label="所在地区"
					placeholder="请选择省/市/区(县)" @click="showPicker = true" />
				<van-popup v-model="showPicker" position="bottom">
					<van-picker show-toolbar :columns="columns" @confirm="onConfirmCity" @cancel="showPicker = false" />
				</van-popup>

				<van-field v-model="address_info.address" name="address" label="详细地址" placeholder="街道,楼牌号等信息" />
				<van-field name="switch" label="设为默认地址">
					<template #input>
						<van-switch v-model="switchChecked" size="20" active-color="#5AB79C" />
					</template>
				</van-field>
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit" color="#5AB79C">保存并使用</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	import request from '../../api/request.js'
	export default {
		name: 'create_address',
		data() {
			return {

				index: '',
				address_info: {},
				switchChecked: false,
				columns: [{
						text: '浙江',
						children: [{
								text: '杭州',
								children: [{
									text: '西湖区'
								}, {
									text: '余杭区'
								}],
							},
							{
								text: '温州',
								children: [{
									text: '鹿城区'
								}, {
									text: '瓯海区'
								}],
							},
						],
					},
					{
						text: '福建',
						children: [{
								text: '福州',
								children: [{
									text: '鼓楼区'
								}, {
									text: '台江区'
								}],
							},
							{
								text: '厦门',
								children: [{
									text: '思明区'
								}, {
									text: '海沧区'
								}],
							},
						],
					},
				],
				showPicker: false,

			}
		},
		methods: {
			back() {
				this.$router.back()
			},
			// 地区
			onConfirmCity(value) {
				this.address_info.fullLocation = value;
				this.showPicker = false;
			},
			async onSubmit(values) {
				console.log('submit', values);
				

				let res = await request({
					url: '/member/address',
					method: 'post',
					headers: {
						Authorization: localStorage.getItem('token')
					},
				    data:{
							"receiver": values.receiver,
							"contact": values.contact,
							"address": values.address,
							"provinceCode": "110000",
							"cityCode": "110100",
							"countyCode": "110101",
							"isDefault": values.switch ? 1 : 0,
							"postalCode": "45",
							"addressTags": "接书拉",
					}

				})
				console.log(res.result)
			},
		}
	}
</script>

<style lang="scss">
	.create_address {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;

		.create_address_title {
			width: 100%;
			height: 6%;
			background-color: #F8F8F8;
			display: flex;
			justify-content: center;
			align-items: center;

			p {
				font-size: 30px;

			}
		}
	}
</style>